<template>
    <div style="margin-bottom: 10px; width: 100%;" :style="{height: max_Height + 'px'}">
        <div ref="chart" style="width:99%;min-height:95%;max-height: 99%;overflow: auto"></div>
    </div>
</template>


<script>
import * as echarts from 'echarts'
import {heightConfig3, set_option_areaMap_pro} from "@/utils/loadPage";
import axios from "axios";

// 地图
export default {
    name: 'AreaMap',
    data() {
        return {
            max_Height: heightConfig3(),
            form: {
                title: '地图测试',  // 图表标题
                title_center: 'center', // 标题位置
                map_name: 'songJiang', // 地图映射名称
                min: 800,
                max: 65000,
                addr: '所在小区',
                device_type: '设备类型',
                alarm_type: '告警类型',
                alarm_time: '告警时间',
                imgUrl: 'img/alarm.gif',  // 告警图标
                alarms: [], // 告警信息
                dataList: [] // 所有数据
            },
        }
    },
    mounted() {
        this.handleResize()
        // 组件挂载时监听窗口大小变化事件，并设置定时器定时获取支付信息
        window.addEventListener('resize', this.handleResize);
        this.timer = setInterval(this.handleResize, 5000)
    },
    beforeDestroy() {
        // 组件销毁前移除窗口大小变化事件监听，销毁 ECharts 实例，并清除定时器和 sessionStorage
        window.removeEventListener('resize', this.handleResize);
        if (this.myChart) {
            this.myChart.dispose(); // 销毁 ECharts 实例
        }
        clearInterval(this.timer)
        sessionStorage.clear()
    },

    methods: {
        // 注册地图
        async set_register_map() {
            let response = await axios.get('/json/songJiang.json');
            let geoJson = response.data;
            echarts.registerMap('songJiang', geoJson);
        },
        handleResize() {
            console.log('Window resized');
            this.max_Height = heightConfig3();
            this.get_data();
            this.set_option()
        },

        async set_option() {
            // 设置图表选项，如果已有图表实例则销毁旧的，重新初始化并设置新选项
            // if (this.myChart) {
            //     this.myChart.dispose(); // 销毁 ECharts 实例
            // }
            await this.set_register_map();
            this.myChart = echarts.init(this.$refs.chart, null, {
                renderer: "svg"
            }) // 初始化 ECharts 实例
            let option = await set_option_areaMap_pro(this, this.form);
            this.myChart.setOption(option);
        },

        get_data() {
            this.form.dataList = [
                {
                    name: '岳阳街道',
                    value: 20057.34,
                    addr: '岳阳小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 10:30:12'
                },
                {
                    name: '永丰街道',
                    value: 15477.48,
                    addr: '永丰小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 11:30:12'
                },
                {
                    name: '方松街道',
                    value: 31686.1,
                    addr: '方松小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-02 11:30:12'
                },
                {
                    name: '泗泾镇',
                    value: 6992.6,
                    addr: '泗泾小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-07-01 11:30:12'
                },
                {
                    name: '佘山镇',
                    value: 44045.49,
                    addr: '佘山小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 11:30:16'
                },
                {
                    name: '车墩镇',
                    value: 40689.64,
                    addr: "车墩小区",
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 15:30:16'
                },
                {
                    name: '新桥镇',
                    value: 37659.78,
                    addr: '新桥小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-06 11:30:16'
                },
                {
                    name: '洞泾镇',
                    value: 45180.97,
                    addr: '洞泾小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 11:30:16'
                },
                {
                    name: '九亭镇',
                    value: 55204.26,
                    addr: '九亭小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 11:30:16'
                },
                {
                    name: '泖港镇',
                    value: 21900.9,
                    addr: '泖港小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 11:30:16'
                },
                {
                    name: '石湖荡镇',
                    value: 4918.26,
                    addr: '石湖小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-02-01 10:30:16'
                },
                {
                    name: '新浜镇',
                    value: 5881.84,
                    addr: '新浜小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 11:50:16'
                },
                {
                    name: '叶榭镇',
                    value: 4178.01,
                    addr: '叶榭小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-12 10:30:00'
                },
                {
                    name: '小昆山镇',
                    value: 2227.92,
                    addr: '昆山小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 11:10:16'
                },
                {
                    name: '松江工业区',
                    value: 2180.98,
                    addr: '松江小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-05-01 11:30:16'
                },
                {
                    name: '中山街道',
                    value: 9172.94,
                    addr: '中山小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 1:30:16'
                }
            ];

            this.form.alarms = Math.random() > 0.5 ? [
                {name: 'Alarm 1', coord: [121.21223452281953, 31.004928645747075], content: 'This is alarm 1'},
                {name: 'Alarm 2', coord: [121.23335070342061, 31.06789758119864], content: 'This is alarm 2'},
            ] : [
                {name: 'Alarm 3', coord: [121.16104059881826, 31.10617707148171], content: 'This is alarm 3'},
                {name: 'Alarm 4', coord: [121.27343559324692, 31.066865630741997], content: 'This is alarm 4'},
                {name: 'Alarm 5', coord: [121.32341579250433, 30.912173084073896], content: 'This is alarm 5'},
                {name: 'Alarm 6', coord: [121.173769812578, 30.9955120047296], content: 'This is alarm 6'},
            ]
        }
    }

}
</script>
